<template>
	<view class="mine-box">
		<view class="mine-top" @click="toChatRoom">
			<view class="mine-top-main">
				<view class="top-main-left">
					<!-- <img src="" alt=""> -->
					<image src="../../static/icon/name.jpg" mode=""></image>
				</view>
				<view class="top-main-right">
					<view class="right-main">
						<h1>用户名</h1>
						<h2>资料完善</h2>
					</view>
				</view>
				<view class="top-main-img">
					<image src="../../static/icon/mine/进入.png" mode=""></image>
				</view>
			</view>
		</view>
		
		<view class="mine-main">
			<view class="main-name"  @click="toTrends">
				<view class="main-name-left">
					<image src="../../static/icon/mine/我的动态.png" mode=""></image>
				</view>
				<view class="h1-box">
					<p>动态</p>
					<text>></text>
				</view>
			</view>
			
			<view class="main-name"  @click="toInterest">
				<view class="main-name-left">
					<image src="../../static/icon/mine/关注.png" mode=""></image>
				</view>
				<view class="h1-box">
					<p>关注</p>
					<text>></text>
				</view>
			</view>
						
			<view class="main-name" >
				<view class="main-name-left">
					<image src="../../static/icon/mine/好友列表.png" mode=""></image>
				</view>
				<view class="h1-box" @click="toFriendsList">
					<p>好友列表</p>
					<text>></text>
				</view>
			</view>
			
			<view class="main-name" @click="toINformation" >
				<view class="main-name-left">
					<image src="../../static/icon/mine/资料完善.png" mode=""></image>
				</view>
				<view class="h1-box">
					<p>资料完善</p>
					<text>></text>
				</view>
			</view>
			
			<view class="main-name">
				<view class="main-name-left">
					<image src="../../static/icon/bixin1.png" mode=""></image>
				</view>
				<view class="h1-box">
					<p>退出登录</p>
					<text>></text>
				</view>
			</view>
				
		</view>
		<view class="setting-footer">
			<view class="main-name"  @click="toSetup">
				<view class="main-name-left">
					<image src="../../static/icon/mine/设置.png" mode=""></image>
				</view>
				<view class="h1-box">
					<p>设置</p>
					<text>></text>
				</view>
			</view>
		</view>

		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		
		methods:{
			toChatRoom() {
			  uni.navigateTo({
			    url: '/pages/mine/means/means'
			  })
			},
			toTrends(){
				uni.navigateTo({
				  url: '/pages/mine/trends/trends'
				})
			},
			toInterest(){
				uni.navigateTo({
				  url: '/pages/mine/interest/interest'
				})
			},
			toSetup(){
				uni.navigateTo({
				  url: '/pages/mine/setup/setup'
				})
			},
			toINformation(){
				uni.navigateTo({
				  url: '/pages/mine/information/information'
				})
			},
			toFriendsList(){
				uni.navigateTo({
				  url: '/pages/mine/friendslist/friendslist'
				})
			}
			
		}
	}
</script>

<style lang="scss" scoped>
 $color:white;
 .mine-box{
	 width: 100%;
	 
	 .mine-top{
		 width: 85%;
		 height: 100px;
		 background: $color;
		 margin: auto;
		
		 .mine-top-main{
			  margin: auto;
			 width: 100%;
			 display: flex;
			 justify-content: space-between;
			 align-items: center;
			 padding: 20px 0px 0px 0px;
			 
			 .top-main-left{
				 width: 60px;
				 height: 60px;
				 border-radius: 14px;
				 background: black;
				 
				 image{
					 width: 100%;
					 height: 100%;
				 }
				 
				 
			 }
			 
			 .top-main-right{
				 width: 200px;
				 margin-left: 20px;
				 padding: 0px 0px 0px 0px;
				 
				 h1{
					 font-size: 36rpx;
				 }
				 
				 h2{
					 font-size: 24rpx;
					 margin: 10px 0px;
				 }
			 }
			 
			 .top-main-img{
				 width: 20px;
				 height: 20px;
				 
				 image{
					 width: 100%;
					 height: 100%;
				 }
			 }
		 }
	 }
	 
	 .mine-main{
		 margin-top: 20px;
		 width: 85%;
		 // height: 200px;
		 margin: 0 auto;
		 background: $color;
		 padding: 20px 0px;
		 
		 .main-name{
			 margin: 20px auto;
			 width: 100%;
			 // height: 35px;
			 display: flex;
			 justify-content: space-between;
			 justify-items: center;
			 
			 .main-name-left{
				 margin: auto 0px;
				 width: 20px;
				 height: 20px;
				image{
			 	width: 100%;
			 	height: 100%;
			 };
			 }
			 

			 
			 .h1-box{
				 // text-align: center;
				 width: 90%;
				 display: flex;
				 justify-content: space-between;
				 align-items: center;
				 border-bottom: 1px solid silver;
				 
				 p{
					 font-size: 30rpx;
				 }
			 }
		 }
	 }
	 
	 .setting-footer{
		 width: 85%;
		 // height: 200px;
		 margin: 0 auto;
		 background: $color;
		 
		 .main-name{
		 			 margin: 0px auto;
		 			 width: 100%;
		 			 // height: 35px;
		 			 display: flex;
		 			 justify-content: space-between;
		 			 justify-items: center;
		 			 
		 			 .main-name-left{
		 				 margin: auto 0px;
		 				 width: 20px;
		 				 height: 20px;
		 				image{
		 			 	width: 100%;
		 			 	height: 100%;
		 			 };
		 			 }
		 			 
		 
		 			 
		 			 .h1-box{
		 				 // text-align: center;
		 				 width: 90%;
		 				 display: flex;
		 				 justify-content: space-between;
		 				 align-items: center;
		 				 // border-bottom: 1px solid silver;
		 				 
		 				 p{
		 					 font-size: 30rpx;
		 				 }
		 			 }
		 }
	 }
 }
</style>
